<template>
	<cl-page>
		<view class="change-password-page">
			<!-- 标题 -->
			<view class="page-header">
				<text class="page-title">修改密码</text>
				<text class="page-subtitle">为了您的账户安全，请定期更换密码</text>
			</view>

			<!-- 表单区域 -->
			<view class="form-section">
				<cl-form ref="form" :model="formData" :rules="rules">
					<!-- 当前密码 -->
					<cl-form-item label="当前密码" prop="oldPassword">
						<cl-input
							v-model="formData.oldPassword"
							type="password"
							placeholder="请输入当前密码"
							:show-password="showOldPassword"
						>
							<template #suffix>
								<cl-icon
									:name="showOldPassword ? 'eye' : 'eye-slash'"
									@tap="showOldPassword = !showOldPassword"
								/>
							</template>
						</cl-input>
					</cl-form-item>

					<!-- 新密码 -->
					<cl-form-item label="新密码" prop="newPassword">
						<cl-input
							v-model="formData.newPassword"
							type="password"
							placeholder="请输入新密码"
							:show-password="showNewPassword"
							@input="checkPasswordStrength"
						>
							<template #suffix>
								<cl-icon
									:name="showNewPassword ? 'eye' : 'eye-slash'"
									@tap="showNewPassword = !showNewPassword"
								/>
							</template>
						</cl-input>
					</cl-form-item>

					<!-- 密码强度指示器 -->
					<view class="password-strength" v-if="formData.newPassword">
						<view class="strength-bar">
							<view
								class="strength-level"
								:class="['level-' + passwordStrength.level]"
								:style="{ width: passwordStrength.percentage + '%' }"
							></view>
						</view>
						<text class="strength-text" :class="['strength-' + passwordStrength.level]">
							{{ passwordStrength.text }}
						</text>
					</view>

					<!-- 确认新密码 -->
					<cl-form-item label="确认密码" prop="confirmPassword">
						<cl-input
							v-model="formData.confirmPassword"
							type="password"
							placeholder="请再次输入新密码"
							:show-password="showConfirmPassword"
						>
							<template #suffix>
								<cl-icon
									:name="showConfirmPassword ? 'eye' : 'eye-slash'"
									@tap="showConfirmPassword = !showConfirmPassword"
								/>
							</template>
						</cl-input>
					</cl-form-item>
				</cl-form>

				<!-- 密码要求 -->
				<view class="password-requirements">
					<text class="requirements-title">密码要求：</text>
					<view class="requirement-item" v-for="req in requirements" :key="req.key">
						<cl-icon
							:name="req.met ? 'check-circle' : 'times-circle'"
							:color="req.met ? '#52c41a' : '#ccc'"
							size="16"
						/>
						<text class="requirement-text" :class="{ met: req.met }">{{
							req.text
						}}</text>
					</view>
				</view>

				<!-- 安全提示 -->
				<view class="security-tips">
					<view class="tips-header">
						<cl-icon name="info-circle" color="#667eea" size="18" />
						<text class="tips-title">安全提示</text>
					</view>
					<view class="tips-content">
						<text class="tip-item">• 建议使用字母、数字和符号的组合</text>
						<text class="tip-item">• 密码长度建议12位以上更安全</text>
						<text class="tip-item">• 避免使用生日、电话号码等易猜测的密码</text>
						<text class="tip-item">• 定期更换密码，提高账户安全性</text>
					</view>
				</view>

				<!-- 提交按钮 -->
				<view class="button-group">
					<cl-button
						type="primary"
						size="large"
						:loading="loading"
						@tap="submitForm"
						:disabled="!canSubmit"
					>
						确认修改
					</cl-button>
					<cl-button type="default" size="large" plain @tap="resetForm"> 重置 </cl-button>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { useCool } from "/@/cool";

const { service, router } = useCool();

// 表单数据
const formData = reactive({
	oldPassword: "",
	newPassword: "",
	confirmPassword: "",
});

// 显示密码控制
const showOldPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);

// 加载状态
const loading = ref(false);

// 密码强度
const passwordStrength = reactive({
	level: 0,
	text: "非常弱",
	percentage: 0,
});

// 表单验证规则
const rules = {
	oldPassword: [
		{
			required: true,
			message: "请输入当前密码",
		},
	],
	newPassword: [
		{
			required: true,
			message: "请输入新密码",
		},
		{
			min: 8,
			message: "密码长度不能少于8位",
		},
		{
			validator: (rule: any, value: string, callback: any) => {
				if (value && value === formData.oldPassword) {
					callback(new Error("新密码不能与当前密码相同"));
				} else {
					callback();
				}
			},
		},
	],
	confirmPassword: [
		{
			required: true,
			message: "请再次输入新密码",
		},
		{
			validator: (rule: any, value: string, callback: any) => {
				if (value !== formData.newPassword) {
					callback(new Error("两次输入的密码不一致"));
				} else {
					callback();
				}
			},
		},
	],
};

// 密码要求检查
const requirements = computed(() => {
	const pwd = formData.newPassword;
	return [
		{
			key: "length",
			text: "至少8个字符",
			met: pwd.length >= 8,
		},
		{
			key: "uppercase",
			text: "包含大写字母",
			met: /[A-Z]/.test(pwd),
		},
		{
			key: "lowercase",
			text: "包含小写字母",
			met: /[a-z]/.test(pwd),
		},
		{
			key: "number",
			text: "包含数字",
			met: /\d/.test(pwd),
		},
		{
			key: "special",
			text: "包含特殊字符",
			met: /[!@#$%^&*(),.?":{}|<>]/.test(pwd),
		},
		{
			key: "different",
			text: "与当前密码不同",
			met: pwd && pwd !== formData.oldPassword,
		},
	];
});

// 是否可以提交
const canSubmit = computed(() => {
	return (
		formData.oldPassword &&
		formData.newPassword &&
		formData.confirmPassword &&
		formData.newPassword === formData.confirmPassword &&
		formData.newPassword !== formData.oldPassword &&
		formData.newPassword.length >= 6
	);
});

// 检查密码强度
function checkPasswordStrength() {
	const pwd = formData.newPassword;
	let strength = 0;

	// 长度检查
	if (pwd.length >= 8) strength++;
	if (pwd.length >= 12) strength++;

	// 字符类型检查
	if (/[a-z]/.test(pwd)) strength++;
	if (/[A-Z]/.test(pwd)) strength++;
	if (/\d/.test(pwd)) strength++;
	if (/[!@#$%^&*(),.?":{}|<>]/.test(pwd)) strength++;

	// 计算强度等级
	const level = Math.min(Math.floor((strength / 6) * 5), 5);
	const texts = ["非常弱", "弱", "一般", "强", "非常强"];
	const percentages = [20, 40, 60, 80, 100];

	passwordStrength.level = level;
	passwordStrength.text = texts[level] || texts[0];
	passwordStrength.percentage = percentages[level] || 20;
}

// 提交表单
async function submitForm() {
	if (!canSubmit.value) return;

	try {
		loading.value = true;

		// 调用修改密码API
		await service.user.info.updatePasswordWithoutCode({
			oldPassword: formData.oldPassword,
			newPassword: formData.newPassword,
		});

		uni.showToast({
			title: "密码修改成功",
			icon: "success",
		});

		// 延迟后返回
		setTimeout(() => {
			router.back();
		}, 1500);
	} catch (error: any) {
		uni.showToast({
			title: error.message || "修改失败",
			icon: "error",
		});
	} finally {
		loading.value = false;
	}
}

// 重置表单
function resetForm() {
	formData.oldPassword = "";
	formData.newPassword = "";
	formData.confirmPassword = "";
	passwordStrength.level = 0;
	passwordStrength.text = "非常弱";
	passwordStrength.percentage = 0;
}
</script>

<style lang="scss" scoped>
.change-password-page {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.page-header {
	padding: 40rpx 32rpx;
	background-color: #fff;
	margin-bottom: 24rpx;
}

.page-title {
	display: block;
	font-size: 36rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 12rpx;
}

.page-subtitle {
	font-size: 26rpx;
	color: #666;
}

.form-section {
	padding: 32rpx;
	background-color: #fff;
}

:deep(.cl-form-item) {
	margin-bottom: 32rpx;

	.cl-form-item__label {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 16rpx;
	}

	.cl-input {
		height: 88rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 28rpx;

		&__suffix {
			padding-right: 24rpx;
		}
	}
}

.password-strength {
	margin-top: -16rpx;
	margin-bottom: 32rpx;
	padding: 0 8rpx;
}

.strength-bar {
	height: 8rpx;
	background-color: #f0f0f0;
	border-radius: 4rpx;
	overflow: hidden;
	margin-bottom: 12rpx;
}

.strength-level {
	height: 100%;
	transition: all 0.3s ease;

	&.level-0,
	&.level-1 {
		background-color: #ff4757;
	}

	&.level-2 {
		background-color: #ffa502;
	}

	&.level-3 {
		background-color: #3498db;
	}

	&.level-4,
	&.level-5 {
		background-color: #2ed573;
	}
}

.strength-text {
	font-size: 24rpx;

	&.strength-0,
	&.strength-1 {
		color: #ff4757;
	}

	&.strength-2 {
		color: #ffa502;
	}

	&.strength-3 {
		color: #3498db;
	}

	&.strength-4,
	&.strength-5 {
		color: #2ed573;
	}
}

.password-requirements {
	background-color: #f8f9fa;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 32rpx;
}

.requirements-title {
	display: block;
	font-size: 26rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 16rpx;
}

.requirement-item {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;

	&:last-child {
		margin-bottom: 0;
	}
}

.requirement-text {
	font-size: 24rpx;
	color: #999;
	margin-left: 12rpx;
	transition: color 0.3s ease;

	&.met {
		color: #333;
	}
}

.security-tips {
	background-color: #f0f4ff;
	border: 1rpx solid #d6e4ff;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 48rpx;
}

.tips-header {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.tips-title {
	font-size: 26rpx;
	font-weight: 500;
	color: #667eea;
	margin-left: 8rpx;
}

.tips-content {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.tip-item {
	font-size: 24rpx;
	color: #666;
	line-height: 1.5;
}

.button-group {
	display: flex;
	flex-direction: column;
	gap: 24rpx;

	.cl-button {
		height: 88rpx;
		font-size: 30rpx;
		border-radius: 44rpx;
	}
}
</style>
